<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="container"></div>
</body>
<script src="https://unpkg.com/konva@6.0.0/konva.min.js"></script>
<script>
    (function () {
        let width = window.innerWidth;
        let height = window.innerHeight;

        let stage = new Konva.Stage({
            container: "container",
            width: width,
            height: height,
        })
        let cenX = width / 2;
        let cenY = height / 2;

        let layer = new Konva.Layer()
        stage.add(layer);
        let circle = new Konva.Circle({
            x: cenX,
            y: cenY,
            radius: 200,
            stroke: "#ccc",
            strokeWidth: 4,
            dash: [10, 5],
        })
        layer.add(circle);
        let groupDa = new Konva.Group({
            x: cenX,
            y: cenY
        })

        let x0 = 200 * Math.cos(-60 * Math.PI / 180);
        let y0 = 200 * Math.sin(-60 * Math.PI / 180);

        let group = new Konva.Group({
            x: x0,
            y: y0
        })
        let arc = new Konva.Circle({
            x: 0,
            y: 0,
            radius: 50,
            fill: '#3af',
            opacity: .8
        })
        group.add(arc)
        let text = new Konva.Text({
            x: 0 - 50,
            y: 0 - 7,
            width: 100,
            text: "HTML5",
            fontSize: 20,
            align: 'center',
            fill: 'white'
        })
        group.add(text)
        groupDa.add(group)
        layer.add(groupDa)
        layer.draw();
        //动画系统
        let velocity = 60;
        let anim = new Konva.Animation(function (farme) {
            let rotateAngel = velocity * farme.timeDiff / 1000;
            groupDa.rotate(rotateAngel);
            groupDa.getChildren().each(item => {
                item.rotate(-rotateAngel)
            })
        }, layer)
        anim.start();

        layer.on("mousemove", function () {
            velocity = 10
        })
        layer.on("mouseout", function () {
            velocity = 60
        })

    }())
</script>

</html>